TNotes.introduction

Appearance

0007. 英文单词列表

0007. 英文单词列表 ​

1. 🎯 本节内容 ​

  • 单词组件的基本用法

2. 🫧 评价 ​

单词组件的数据源来自于开源项目 dict。

⏰ TODO

使用体验不是特别满意，还会继续优化！

3. 🤔 英文单词列表组件是什么？如何使用？有哪些功能？ ​

3.1. 核心功能简介 ​

功能类别功能简介
词汇预加载✅ 优化单词卡片的加载体验
词汇卡片✅ 支持 pin 到页面上
✅ 单词卡片支持拖动
✅ 单词卡片尺寸支持调节
✅ 层级自动会调节（被点击的 card 默认置顶）
✅ 打开自动显示单词卡片的开关后，鼠标悬停时自动展示单词详情
发音✅ 支持英音、美音
✅ 支持批量播放
✅ 被朗读的单词默认高亮
✅ 批量播放中再次播放任意单词会中止后续流程
完成状态切换✅ 对记住的词汇可在前边打勾
✅ 学习记录缓存在浏览器中
排序✅ 可配置是否根据字母升序排序

3.2. 功能演示 ​

  • 1 - 右键菜单项
  • 2 - 播放到的词汇自动高亮
  • 3 - 自动展示单词卡片
  • 4 - 单词卡片的 pin 功能
1
2
3
4

3.3. 使用示例 ​

md
<!-- 布尔属性：needSort，可以开启按照字母升序排序的功能 -->

<EnWordList :words="[
'cancel',
'explosive',
'numerous',
'govern',
'analyse',
'discourage',
'resemble',
'remote',
'salary',
'pollution',
'pretend',
'kettle',
'wreck',
'drunk',
'calculate',
'persistent',
'sake',
'conceal',
'audience',
'meanwhile',]" />

最终效果如下：

  1. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20.

4. 🔗 引用 ​

Discussions